/**
 * 浮动按钮组件
 */

import React from 'react';
import { floatingButtonContainerStyle, floatingButtonStyle } from '../styles';

interface FloatingButtonProps {
  isOpen: boolean;
  onClick: () => void;
  buttonRef: React.RefObject<HTMLDivElement>;
}

const FloatingButton: React.FC<FloatingButtonProps> = ({ isOpen, onClick, buttonRef }) => {
  return (
    <div ref={buttonRef} style={floatingButtonContainerStyle}>
      <div
        onClick={onClick}
        style={floatingButtonStyle(isOpen)}
        onMouseEnter={(e) => {
          e.currentTarget.style.transform = isOpen ? 'rotate(180deg) scale(1.1)' : 'scale(1.1)';
          e.currentTarget.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.6)';
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.transform = isOpen ? 'rotate(180deg)' : 'scale(1)';
          e.currentTarget.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.4)';
        }}
      >
        <svg
          width="28"
          height="28"
          viewBox="0 0 24 24"
          fill="none"
          stroke="white"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          {isOpen ? (
            <path d="M18 6L6 18M6 6l12 12" />
          ) : (
            <>
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
              <path d="M8 10h.01M12 10h.01M16 10h.01" />
            </>
          )}
        </svg>
      </div>
    </div>
  );
};

export default FloatingButton;
